/**
 * 创建一个 HTML 元素
 * @param {string} tag - 标签名，如 'div', 'button'
 * @param {object} [attrs] - 属性对象，比如 { id: 'myId', class: 'cls' }
 * @param {string | HTMLElement | (HTMLElement | string)[]} [children] - 子元素或文本
 * @returns {HTMLElement}
 */
function el(tag, attrs = {}, children = []) {
  const element = document.createElement(tag);

  for (const [key, value] of Object.entries(attrs)) {
    if (key === 'style' && typeof value === 'object') {
      Object.assign(element.style, value);
    } else if (key.startsWith('on') && typeof value === 'function') {
      element.addEventListener(key.slice(2).toLowerCase(), value);
    } else if (key === 'dataset' && typeof value === 'object') {
      for (const [dataKey, dataVal] of Object.entries(value)) {
        element.dataset[dataKey] = dataVal;
      }
    } else {
      element.setAttribute(key, value);
    }
  }

  // 处理 children 参数
  if (!Array.isArray(children)) {
    children = [children];
  }
  for (const child of children) {
    if (child instanceof HTMLElement) {
      element.appendChild(child);
    } else if (typeof child === 'string') {
      const trimmed = child.trim();
      if (trimmed.startsWith('<') && trimmed.endsWith('>')) {
        // 用template解析html字符串成节点
        const template = document.createElement('template');
        template.innerHTML = trimmed;
        element.appendChild(template.content);
      } else {
        element.appendChild(document.createTextNode(child));
      }
    }
  }

  return element;
}

const formatFileSize = (size) => {
  const units = ["B", "K", "M", "G", "T"];
  let i = 0;
  while (size >= 1024 && i < units.length - 1) {
    size /= 1024;
    i++;
  }
  return `${size.toFixed(2)}${units[i]}`;
};

const delBtnHTML = `
  <button class="del_btn" aria-label="删除" title="删除">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
      <path d="M3 6h18"/>
      <path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>
      <path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/>
      <path d="M10 11v6"/>
      <path d="M14 11v6"/>
    </svg>
  </button>`;

const playPauseBtnHTML = `
  <button class="play_pause_btn" aria-label="播放" title="播放/暂停">
    <svg width="26" height="26" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet">
      <polygon class="playIcon" points="16,12 52,32 16,52" fill="currentColor" />
      <g class="pauseIcon" style="display:none;" fill="currentColor">
        <rect x="16" y="12" width="10" height="40" />
        <rect x="38" y="12" width="10" height="40" />
      </g>
    </svg>
  </button>`;

